<template>
	<view class="share-popup">
		<!-- 分享弹窗选项 -->
		<u-popup v-model="show" mode="bottom" border-radius="30">
		  <view class="popup-box">
		    <view class="popup-title">分享获得更多转化</view>
		    
		    <!-- 分享的目标 -->
		    <view class="share-target flex flex-ai-c flex-jc-sa">
		      <template v-for="(item, i) in shareList">
		        <view :key="i" class="flex flex-dir-c flex-ai-c" @click="handleShare(item)">
              <i-icon
                :icon="item.icon"
                size="90rpx"
                :color="item.color"
                :type="!item.color ? 'multiple':'single'"
              ></i-icon>
              <text class="text">{{ item.text }}</text>
		        </view>
		      </template>
		    </view>
		    
		    <!-- 取消按钮 -->
		    <view class="btn-cancel" @click="cancel()">
		      <text>取消</text>
		    </view>
		  </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		model: {
			prop: 'popupShow',
			event: 'up'
		},
		props: {
			popupShow: {
				type: Boolean,
				default: false
			},
      showDownload: {
        type: Boolean,
        default: false
      }
		},
		computed: {
			show: {
				get() {
					return this.popupShow
				},
				set(v) {
					this.$emit('up', v)
				}
			},
      
      shareList() {
        if (this.showDownload) {
          return this.list
        } else {
          return this.list.splice(0, 2)
        }
      }
		},
		data() {
			return {
				// 分享目标app列表
				list: [
				  {
				    icon: 'iconfenxiangweixin',
				    text: '微信',
				    color: '#46bb36',
				    type: 'WXSceneSession'
				  },
				  {
				    icon: 'iconfenxiangpengyouquan',
				    text: '朋友圈',
				    color: '',
				    type: 'WXSenceTimeline'
				  },
				  {
				    icon: 'iconxiazai',
				    text: '下载',
				    color: '#fbb000',
				    type: 'download'
				  },
				],
			};
		},
		
		methods: {
			// 点击分享
			handleShare(item) {
				this.$emit('change', item.type)
			},
			
			// 取消
			cancel() {
				this.$emit('close', false)
				this.$emit('up', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
// 分享弹窗样式
.popup-box {
  font-size: 32rpx;
  color: #333333;
  
  .popup-title {
    padding-top: 40rpx;
    text-align: center;
  }
  
  .share-target {
    padding: 52rpx 20rpx 36rpx;
    .text {
      margin-top: 28rpx;
    }
  }
  
  // 取消按钮
  .btn-cancel {
    height: 100rpx;
    line-height: 100rpx;
    border-top: 10rpx solid #F4F4F4;
    text-align: center;
  }
    
}
</style>
